/**
 * Created by Administrator on 2017/2/7.
 */
import { Component,OnInit } from '@angular/core';
import { PubuService } from './pubu.serve'
import { Router, ActivatedRoute, Params } from '@angular/router';

import { Subject}  from 'rxjs/Subject'


@Component({
    moduleId: module.id,
    templateUrl: 'pubu.html',
    styles: [`
     @media (max-width: 992px) {
     .pubu{
            height: auto;
        	-moz-column-count:3; /* Firefox */
	         -webkit-column-count:3; /* Safari and Chrome */
	         column-count:3;
	         -webkit-column-gap:10px;
                -moz-column-gap:10px;
                -o-column-gap:10px;
        }
        .pubu ._masonry-box{
        margin-left: 3px;
        margin-top: 10px;
        display: inline-block;
        }
      }
    @media (min-width: 992px) and (max-width:1200px) {
    .pubu{
    height: auto;
        	-moz-column-count:4; /* Firefox */
	         -webkit-column-count:4; /* Safari and Chrome */
	         column-count:4;
	         -webkit-column-gap:10px;
                -moz-column-gap:10px;
                -o-column-gap:10px;
        }
        .pubu ._masonry-box{
        margin-left: 3px;
        margin-top: 10px;
        display: inline-block;
        }
     }
    @media (min-width: 1200px) {
         .pubu{
            height: auto;
        	-moz-column-count:6; /* Firefox */
	         -webkit-column-count:6; /* Safari and Chrome */
	         column-count:6;
	         -webkit-column-gap:10px;
                -moz-column-gap:10px;
                -o-column-gap:10px;
        }
        .pubu ._masonry-box{
        margin-left: 3px;
        margin-top: 10px;
        display: inline-block;
        }
     }
     ._mason-box2{
     float: left;
     margin-right: 10px;
     }

`],
    providers:[ PubuService ]
})
export class pubu implements OnInit {
      public facinfro='';
      private serchvalue='';
      public searcht:Subject<string> = new Subject<string>();

  constructor(
       private pubuService:PubuService,
       private route: ActivatedRoute,
       private router: Router,

     ){}


     //得到瀑布流的信息
     getfac(key:string){
        this.pubuService.grtinfro(key)
          .subscribe(
            res =>{this.facinfro =res['data'];
              console.log(this.facinfro)},
            error =>  { console.log(error)},

          );
     }
     //跳转材料详情页
     gomatrialdetial(id:number){
       this.router.navigate(['/linkRes',id]);
     }
     //跳转到工厂详情页
      gofacdetail(id:number){
        this.router.navigate(['/linkNologin',id]);
     }
     ngOnInit() {
       //得到搜索框的值
       this.route.params
         .subscribe((params:Params)=>{this.serchvalue= params['govaul'];
           let serchtrue =this.serchvalue;
           console.log(serchtrue);
           // this.getfac(serchtrue);
           this.pubuService.grtinfro(serchtrue)
             .subscribe(
               res =>{this.facinfro =res['data'];
                 console.log(this.facinfro)},
               error =>  { console.log(error)})
       });

     }
      //点击搜索
     serchlist(serchtrue:string){
       this.pubuService.grtinfro(serchtrue)
         .subscribe(
           res =>{this.facinfro =res['data'];
             console.log(this.facinfro)},
           error =>  { console.log(error)})
     }

     //瀑布流的交换
     pubu =true;
     pubu2=false;
     changeLink(){
        this.pubu= true;
         this.pubu2=false;
     }
    changeLink2(){
        this.pubu= false;
        this.pubu2=true;
    }
    rightsh =false;
    rShow(){
         if (this.rightsh==true){
            this.rightsh=false
        }else {
            this.rightsh=true
        }
    }
}
